<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>日任务栏</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/calendar.css" rel="stylesheet">
    <link href="../../js/lib/LCalendar/LCalendar.css" rel="stylesheet">
</head>
<body id="calender-daily">
<div class="container">
    <div class="head">
        <i class="icon iconfont icon-jiantou1"></i>
        <h2>事件栏</h2>
        <div class="overdue">
            逾期事件<span>1</span>
        </div>
    </div>

    <div class="content">
        <div class="content-head">
            <input type="text" readonly>
            <i class="icon iconfont icon-bianji"></i>
        </div>
        <ul class="head-list clearfix">
            <li><i class="icon iconfont icon-tb17"></i><span>家庭</span></li>
            <li><i class="icon iconfont icon-kafeiting"></i><span>生活</span></li>
            <li><i class="icon iconfont icon-gongzuo"></i><span>工作</span></li>
            <li><i class="icon iconfont icon-yule"></i><span>娱乐</span></li>
            <li class="fr">向右滑动试试</li>
        </ul>
        <div class="content-list">
            <table style="width: 100%"><tbody></tbody></table>
            <hr color=#eee>
        </div>

    </div>

    <div class="foot">
        <ul class="clearfix">
            <li><a><div class="hover"><img src="../../images/calendar_num.png"><span>1</span></div><p>日计划</p></a></li>
            <li><a href="week.html"><div><img src="../../images/calendar_num.png"><span>7</span></div><p>周计划</p></a></li>
            <li class="plus"><i class="icon iconfont icon-add30"></i></li>
            <li><a href="index.html"><div><img src="../../images/calendar_num.png"><span style="left:0.25rem;">31</span></div><p>月计划</p></a></li>
            <li><a href="../memorandum/UserMemo.html"><div><img src="../../images/calendar_num.png"><span>√</span></div><p>备忘录</p></a></li>
        </ul>
    </div>

    <div class="bar">
        <div class="leftBar fl">
            <h3>事件清单</h3>
            <ul></ul>
            <div class="bottom-button"><span>历史记录</span></div>
        </div>
        <div class="rightBar fl"></div>
    </div>

    <div class="mask"></div>

</div>

<script id="list_tmpl" type="text/html">
    {{if objs.length == 0 }}

    {{else}}
    {{each objs as obj i}}
    {{ if i%2 == 0 }}
    <tr>
        <td class="tr" width="43%"><span>{{obj.time}}<b>{{obj.name}}</b></span></td>
        <td class="tc" width="14%"><div class="{{obj.className}}"><i class="icon iconfont icon-{{obj.className}}"></i></div></td>
        <td class="tl" width="43%">&nbsp;</td>
    </tr>
    {{else}}
    <tr>
        <td class="tr" width="43%">&nbsp;</td>
        <td class="tc" width="14%"><div class="{{obj.className}}"><i class="icon iconfont icon-{{obj.className}}"></i></div></td>
        <td class="tl" width="43%"><span><b>{{obj.name}}</b>{{obj.time}}</span></td>
    </tr>
    {{/if}}
    {{/each}}

    {{/if}}
</script>

<script id="task_list_tmpl" type="text/html">
    {{if contacts.length == 0 }}

    {{else}}
    {{each contacts as obj i}}
    <li><i class="icon iconfont icon-{{obj.className}}"></i><span>{{obj.name}}</span></li>
    {{/each}}

    {{/if}}
</script>

<script id="content_list_tmpl" type="text/html">
    {{if content.length == 0 }}

    {{else}}
    <div class="title">{{date}}</div>
    {{each content as obj i}}
    <ul class="hide">
        {{each obj as task j}}
        <li data-flag="{{task.task_flag}}">
            <h4>
                <span class="mainTitle">{{task.task_name}}</span>
                <span class="subtitle1">{{if task.task_flag == 0}}[{{task.task_remain}}]{{/if}}</span>
                <span class="subtitle2">{{if task.task_flag == 1}}[已完成]{{else if task.task_flag == 2}}[已放弃]{{/if}}</span>
                <a><i class="icon iconfont icon-jiantou-copy"></i></a>
            </h4>
            <div class="drop hide">
                {{each task.task_content as val k}}
                <div class="drop-content">
                    <div class="drop-left"><div class="img-box"><img src="{{val.img_path}}"></div><hr color="#e9e9eb"><b></b></div>
                    <div class="drop-right">
                        <h5><span class="fl">{{val.summary}}</span>{{if task.task_flag == 0 && val.remaining_time!=""}}<span class="fr" style="color:#d4433d">[{{val.remaining_time}}]</span>{{/if}}<i class="icon iconfont icon-dianhua"></i><i class="icon iconfont icon-yuyin"></i><a href="{{val.url}}"><i class="icon iconfont icon-bianji"></i></a></h5>
                        <span>{{val.time}}</span>
                        <p>{{val.content}}</p>
                    </div>
                </div>
                {{/each}}
                {{if task.task_flag == 1 || task.task_flag == 2}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-fanxiantongqian"></i></div></div>
                    <div class="drop-right"><a class="end">完结</a></div>
                </div>
                {{else if task.task_flag == 0 && task.task_angel == 0 }}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="revoke check-again">撤销</a></div>
                </div>
                {{else if task.task_flag == 0 && task.task_content.length<3 && task.task_receive == 0}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="receive check-again">接收</a><a class="transmit check-again">转交</a><a class="deny check-again">拒绝</a></div>
                </div>
                {{else if task.task_flag == 0 && task.task_content.length<3 && task.task_receive == 1}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="done check-again">完成</a><a class="transmit check-again">转交</a><a class="abandon check-again">放弃</a></div>
                </div>
                {{else if task.task_flag == 0 && task.task_content.length>=3 && task.task_angel == 1}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="revoke check-again">撤销</a></div>
                </div>
                {{else if task.task_flag == 0 && task.task_content.length>=3 && task.task_angel == 2 && task.task_receive == 0}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="receive check-again">接收</a><a class="transmit check-again">转交</a><a class="deny check-again">拒绝</a></div>
                </div>
                {{else}}
                <div class="drop-content over">
                    <div class="drop-left"><div class="img-box"><i class="icon iconfont icon-add30"></i></div></div>
                    <div class="drop-right"><a class="done check-again">完成</a><a class="transmit check-again">转交</a><a class="abandon check-again">放弃</a></div>
                </div>
                {{/if}}
            </div>
        </li>
        {{/each}}
    </ul>
    {{/each}}

    {{/if}}
</script>

<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/template-simple.js"></script>
<script src="../../js/lib/LCalendar/LCalendar.js"></script>
<script src="../../js/lib/jgestures.min.js"></script>
<script src="../../js/lib/layer_mobile/layer.js"></script>
<script>
    /*初始化当天日期*/
    var d = new Date();
    var str = d.getFullYear()+"-"+(d.getMonth()<9?'0'+(d.getMonth()+1):d.getMonth()+1 )+"-"+(d.getDate()<9?'0'+d.getDate():d.getDate());
    $(".content-head input").val(str);

    /*时间控件*/
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '.content-head input', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': '1900-1-1', //最小日期
        'maxDate': '2100-1-1' //最大日期
    });

    /*滑动滑出和消失*/
    var flag = false;
    $(".container").bind('swiperight',function(){
        if( !flag ){
            flag = true;
            $('.mask').show();
            $('.bar').addClass('show');
            $('html').css({'overflow':'hidden','height':'100%'});
            $('body').css({'overflow':'hidden','height':'100%'});
        }
    });
    $(".rightBar").bind('swipeleft',function(){
        if( flag ){
            flag = false;
            $('.mask').hide();
            $('.bar').removeClass('show');
            $('html').css({'overflow':'auto','height':'100%'});
            $('body').css({'overflow':'auto','height':'100%'});
        }
    });

    /*左菜单栏点击联系人*/
    $(".bar .leftBar ul").on('click','li',function () {
        var index = $(this).index();
        $(this).addClass('hover').siblings().removeClass('hover');
        $('.bar .rightBar ul').hide().eq(index).show()
    });
    /*左菜单栏下拉展开*/
    $(".bar .rightBar").on('click','li h4',function () {
        if($(this).find('i').hasClass('rotate')){
            $(this).find('i').removeClass('rotate');
            $(this).parent().find('.drop').fadeToggle(300,'swing')

        }else{
            $(this).find('i').addClass('rotate');
            $(this).parent().find('.drop').fadeToggle(300,'swing')
        }
    });
    /*事件清单、历史记录切换*/
    $(".leftBar .bottom-button").click(function () {
        $(".rightBar ul h4 em").text('展开');
        $(".rightBar ul .iconfont").removeClass('rotate');
        $(".rightBar .drop").fadeOut(300,'swing');
        if($(this).find('span').text() == '历史记录'){
            $(".leftBar h3").text('历史记录');
            $(this).find('span').text('事件清单');
            $(".rightBar ul h4 .subtitle1").hide();
            $(".rightBar ul h4 .subtitle2").show();
            $(".rightBar ul").each(function () {
                $(this).find('li').each(function () {
                    var flag = $(this).data('flag');
                    if( flag == 1 ){
                        $(this).find('h4').addClass('done')
                    }else if( flag == 2 ){
                        $(this).find('h4').addClass('abandon')
                    }else if( flag == 0 ){
                        $(this).hide()
                    }
                });
            })
        }else{
            $(".leftBar h3").text('事件清单');
            $(this).find('span').text('历史记录');
            $(".rightBar ul h4 .subtitle1").show();
            $(".rightBar ul h4 .subtitle2").hide();
            $(".rightBar ul li h4").removeClass("done abandon");
            $(".rightBar ul li").show()
        }
    });
    /*确认操作*/
    $(".rightBar").on('click','a.check-again',function () {
        var text = $(this).text();
        layer.open({
            content: '您确定要'+text+'吗？'
            ,btn: ['确定', '不要']
            ,yes: function(index){
                alert(text);
                layer.close(index);
            }
        });
    });
    /*点击遮罩消失*/
    $('.mask').click(function(){
        flag = false;
        $('.mask').hide();
        $('.bar').removeClass('show');
    });

    /*刷新数据*/
    $('.content-head input').change(function () {
        var data = {
            objs:[
                {"name":'健身1',"time":'09:09',"className":'gongzuo'},
                {"name":'健身',"time":'09:09',"className":'kafeiting'},
                {"name":'健身',"time":'09:09',"className":'tb17'},
                {"name":'健身',"time":'09:09',"className":'yule'},
                {"name":'健身1',"time":'09:09',"className":'gongzuo'},
                {"name":'健身',"time":'09:09',"className":'kafeiting'},
                {"name":'健身',"time":'09:09',"className":'tb17'},
                {"name":'健身',"time":'09:09',"className":'yule'}
            ],
            date: '2017年7月23日 周日',
            contacts:[
                {"className":"gongzuo","name":"张三丰"},
                {"className":"kafeiting","name":"欧阳震华"}
            ],
            content:[
                [
                    {
                        "task_name":"完成任务",
                        "task_flag":"1",
                        "task_angel":"0",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"},
                            {"summary":"某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"待接收任务",
                        "task_flag":"0",
                        "task_angel":"1",
                        "task_receive":"0",
                        "task_remain":"剩07天",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"剩余1天","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"已接收任务",
                        "task_flag":"0",
                        "task_angel":"2",
                        "task_receive":"1",
                        "task_remain":"剩07天",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"剩余1天","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"终止任务",
                        "task_flag":"2",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容具体内容具体内容"}]
                    }
                ],
                [
                    {
                        "task_name":"完成任务",
                        "task_flag":"1",
                        "task_angel":"0",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"},
                            {"summary":"某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"待接收任务",
                        "task_flag":"0",
                        "task_angel":"1",
                        "task_receive":"0",
                        "task_remain":"剩07天",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"剩余1天","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"已接收任务",
                        "task_flag":"0",
                        "task_angel":"2",
                        "task_receive":"1",
                        "task_remain":"剩07天",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"","content":"具体内容具体内容具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","remaining_time":"剩余1天","content":"具体内容具体内容"}]
                    },
                    {
                        "task_name":"终止任务",
                        "task_flag":"2",
                        "task_content":[
                            {"summary":"交电费","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容"},
                            {"summary":"某某某","url":"../task/Task.html","img_path":"../../images/head_image.png","time":"2015.06.07 14.16.44","content":"具体内容具体内容具体内容具体内容"}]
                    }
                ]
            ]
        };

        var html = template.render("list_tmpl", data);
        $(".content-list tbody").html(html);
        var html_contacts = template.render("task_list_tmpl", data);
        $(".bar .leftBar ul").html(html_contacts);
        var html_content = template.render("content_list_tmpl", data);
        $(".bar .rightBar").html(html_content);
    });

    /*初始化*/
    $('.content-head input').trigger('change');
    $(".bar .leftBar ul li").eq(0).click()

</script>
</body>
</html>